<template>
    <div class="genderRatio-main">
        <div class="genderRatio-header">
            <div class="man">
                <span>男士</span>
                <img src='../images/man.png' alt='男士' />
            </div>
            <div class="woman">
                <span>女士</span>
                <img src='../images/woman.png' alt='女士' />
            </div>
        </div>
        <div class="echarts" id="GenderRatioChart"></div>
    </div>
</template>
<script setup>
import { init } from 'echarts'

const initChart = (data) => {
    const charEle = document.getElementById('GenderRatioChart')
    const charEch = init(charEle)
    const option = {
        xAxis: {
            type: 'value',
            show: false
        },
        grid: {
            left: '0',
            top: '30px',
            bottom: '0',
            right: '0'
        },
        yAxis: [
            {
                type: 'category',
                position: 'left',
                data: ['男生'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
					show: false
				}
            },
            {
				type: "category",
				position: "right",
				data: ["女士"],
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisLabel: {
					show: false,
					padding: [0, 0, 40, -60],
					fontSize: 12,
					lineHeight: 60,
					color: "rgba(255, 255, 255, 0.9)",
					formatter: "{value}" + data.woman * 100 + "%",
					rich: {
						a: {
							color: "transparent",
							lineHeight: 30,
							fontFamily: "digital",
							fontSize: 12
						}
					}
				}
			}
        ],
        series: [
			{
				type: "bar",
				barWidth: 20,
				data: [data.man],
				z: 20,  // 控制图形的先后顺序
				itemStyle: {  // 图形样式
					borderRadius: 10,
					color: "#007AFE"
				},
				label: {
					show: true,
					color: "#E7E8ED",
					position: "insideLeft",
					offset: [0, -20],
					fontSize: 12,
					formatter: () => {
						return `男士 ${data.man * 100}%`;
					}
				}
			},
			{
				type: "bar",
				barWidth: 20,
				data: [1],
				barGap: "-100%",
				itemStyle: {
					borderRadius: 10,
					color: "#FF4B7A"
				},
				label: {
					show: true,
					color: "#E7E8ED",
					position: "insideRight",
					offset: [0, -20],
					fontSize: 12,
					formatter: () => {
						return `女士 ${data.woman * 100}%`;
					}
				}
			}
		]
    }
    charEch.setOption(option)
    return charEch
}
defineExpose({
    initChart
})
</script>
<style lang="scss" scoped>
.genderRatio-main {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 40px 65px;
    .genderRatio-header{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 115px;
        .man,
        .woman {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 110px;
            height: 115px;
            background: url('../images/man-bg.png') no-repeat;
            background-size: 100% 100%;
            img {
				width: 60px;
				height: 60px;
				margin-top: 20px;
			}
			span {
				margin-top: 2px;
				font-size: 13px;
				color: #ffffff;
			}
        }
        .woman {
			background: url("../images/woman-bg.png") no-repeat;
		}
    }
    .echarts {
		width: 100%;
		height: calc(100% - 115px);
	}
}
</style>